<template>
	<div style="">
		<el-row :span="24">
			<el-col :sm="24" :xs="0">
				<PcHedaer ref="pcHedaer"></PcHedaer>
				<div class="pc_con">
					<PcDrawer ref="pcDrawer" :navIndex="navIndex1" :navs="navs" :changeNav="changeNav1"></PcDrawer>
					<div class="pc_conbox">
						<div class="pc_conboxs scroll-container1" @scroll="pageScroll1">
							<el-carousel height="208px" autoplay type="card">
								<el-carousel-item v-for="(item,index) in swiperList" :key="index">
									<img :src="item.pic" style="border-radius: 10px;" />
								</el-carousel-item>
							</el-carousel>
							<div class="pc_notice">
								<!-- <img class="laba" src='/icons/index/laba.png' /> -->
								<div class="svg-icon-UPCeJ"
									style="margin-right: 5px;fill: var(--theme-mine-icon-color); stroke: var(--theme-mine-icon-color); width: 28px; height: 28px; color: var(--theme-mine-icon-color);">
									<svg width="32" height="32" viewBox="0 0 32 32" fill="none"
										xmlns="http://www.w3.org/2000/svg">
										<g id="icon/å…¬å‘Š">
											<path id="è·¯å¾„" fill-rule="evenodd" clip-rule="evenodd"
												d="M15.1938 6.50026C16.2604 5.87782 17.6002 6.6472 17.6002 7.88218V24.1175C17.6002 25.3525 16.2604 26.1219 15.1938 25.4995L7.21796 20.8452C7.21027 20.8407 7.20554 20.8325 7.20554 20.8236C7.20554 20.8097 7.19432 20.7985 7.18049 20.7985L4.80073 20.7993C3.91687 20.7996 3.2002 20.0832 3.2002 19.1993V12.7993C3.2002 11.9159 3.91621 11.1996 4.79966 11.1993L7.1822 11.1985C7.19509 11.1985 7.20554 11.1881 7.20554 11.1752C7.20554 11.1669 7.20995 11.1592 7.21712 11.155L15.1938 6.50026Z"
												fill="currentColor"></path>
											<path id="è·¯å¾„_2" opacity="0.403068"
												d="M20.5254 20.8001C21.6836 19.5716 22.3999 17.8746 22.3999 16.0001C22.3999 14.1256 21.6836 12.4285 20.5254 11.2001"
												stroke="currentColor" stroke-width="2.4" stroke-linecap="round"></path>
											<path id="è·¯å¾„_3" opacity="0.403068"
												d="M24.8225 24C26.8356 21.6612 27.9927 18.9247 27.9927 16C27.9927 13.0753 26.8356 10.3388 24.8225 8"
												stroke="currentColor" stroke-width="2.4" stroke-linecap="round"></path>
										</g>
										<defs>
											<linearGradient id="paint0_linear_1365_114851" x1="3.2002" y1="5.09601"
												x2="3.2002" y2="26.9037" gradientUnits="userSpaceOnUse">
												<stop stop-color="#81DAFF"></stop>
												<stop offset="1" stop-color="#307FCD"></stop>
											</linearGradient>
										</defs>
									</svg>
								</div>
								<swiper class="noticeswiperbox" ref="noticeSwiper" :options="NoticeOptions">
									<swiper-slide v-for="(item,index) in noticeData" :key="index">
										<span class="curp" @click="gonoticedetail(item.id)"
											:style="noticeIndex==index?'transform: translateX(-'+((item.width*0.01)+12.2)+'rem);transition:50s linear 0.5s;':''">{{item.title}}</span>
									</swiper-slide>
								</swiper>
								<div @click="gonotice" class="svg-icon-UPCeJ notice-email-QdgGP"
									style="margin-right: 5px;fill: #1c8ac1; stroke: var(--theme-mine-icon-color); width: 24px; height: 24px; color: var(--theme-mine-icon-color);"><svg viewBox="0 0 42 42" fill="none"
										xmlns="http://www.w3.org/2000/svg">
										<g clip-path="url(#clip0_2967_63844)">
											<path
												d="M2.60449 15.7822H39.3969V37.0773C39.3969 39.1614 37.7074 40.851 35.6233 40.851H6.37813C4.294 40.851 2.60449 39.1614 2.60449 37.0773V15.7822Z"
												fill="currentColor"></path>
											<path
												d="M19.7896 1.01218C20.4902 0.426319 21.5098 0.426321 22.2104 1.01218L38.6635 14.771C40.016 15.902 39.2162 18.1052 37.4531 18.1052H4.54692C2.7838 18.1052 1.984 15.902 3.33653 14.771L19.7896 1.01218Z"
												fill="currentColor"></path>
											<rect x="4.49023" y="13.9268" width="33.0189" height="25.9972" rx="3.77363"
												fill="#FFF0B9"></rect>
											<path
												d="M19.8201 25.5887C20.5093 25.0373 21.4886 25.0373 22.1778 25.5887L36.8162 37.3016C38.2088 38.4158 37.4209 40.6616 35.6374 40.6616H6.36049C4.577 40.6616 3.7891 38.4158 5.18167 37.3016L19.8201 25.5887Z"
												fill="currentColor"></path>
											<path d="M21.8709 24.5545L38.4685 17.7651L37.5098 38.0649L21.8709 24.5545Z"
												fill="currentColor"></path>
											<path d="M20.2789 24.5558L3.68136 17.7663L4.49023 38.0674L20.2789 24.5558Z"
												fill="currentColor"></path>
										</g>
										<defs>
											<clipPath id="clip0_2967_63844">
												<rect width="42" height="42" fill="white"></rect>
											</clipPath>
										</defs>
									</svg></div>
								<!-- <img src="../../assets/images/yh/icon_message2.png" @click="gonotice"
									style="border-radius: 2px;width:0.15rem;height:0.1rem" /> -->
								<!-- <i class="icon_notice" @click="gonotice" style=""></i> -->
							</div>
							<div class="pc_list">
								<div class="pc_listtop">
									<el-scrollbar height="1">
										<div class="pc_tabs">
											<div class="pc_tabs_bar">

												<!-- <div :class="'navs_list ' + (item.id == navIndex1?'active':'')"
													v-for="(item,index) in navs" :key="index" @click="changeNav1(item)"
													v-if="item.id != -4">
													<i v-if="item.id != navIndex1" class="icons"><svg
															viewBox="0 0 20.413 12.425" width="1em" height="1em"
															fill="currentColor" aria-hidden="true" focusable="false">
															<use :xlink:href="'/icons/icon.svg#'+item.key+'--sprite'">
															</use>
														</svg></i>
													<img v-else :src="'/icons/active/'+item.key+'.png'" />
													<span>{{item.name}}</span>
												</div> -->

												<div :class="'navs_list ' + (0 == navIndex1?'active':'')"
													@click="changeNav1(item={id:0})" style="font-size:40px;">
													<i v-if="0 != navIndex1" class="icons"><svg
															viewBox="0 0 20.413 12.425" width="1em" height="1em"
															fill="currentColor" aria-hidden="true" focusable="false">
															<use
																xlink:href="/icons/spr.svg#icon_dtfl_rm_0--svgSprite:all">
															</use>
														</svg></i>
													<img v-else src="/icons/active/icon_dtfl_rm_1.png" />
													<span style="padding-top:0px;">{{ $t('l_remen') }}</span>
												</div>
												<div :class="'navs_list ' + (2 == navIndex1?'active':'')"
													@click="changeNav1(item={id:2})">
													<i v-if="2 != navIndex1" class="icons" style="font-size:40px;"><svg
															viewBox="0 0 20.413 12.425" width="1em" height="1em"
															fill="currentColor" aria-hidden="true" focusable="false">
															<use
																xlink:href="/icons/spr.svg#icon_dtfl_dz_0--svgSprite:all">
															</use>
														</svg></i>
													<img v-else src="/icons/active/icon_dtfl_dz_1.png" />
													<span>{{ $t('l_dianzi') }}</span>
												</div>
												<div :class="'navs_list ' + (3 == navIndex1?'active':'')"
													@click="changeNav1(item={id:3})">
													<i v-if="3 != navIndex1" class="icons" style="font-size:40px;"><svg
															viewBox="0 0 20.413 12.425" width="1em" height="1em"
															fill="currentColor" aria-hidden="true" focusable="false">
															<use
																xlink:href="/icons/icon.svg#icon_game_menu_active_8--sprite">
															</use>
														</svg></i>
													<img v-else src="/icons/active/icon_game_menu_active_5.png" />
													<span>{{ $t('l_caipiao') }}</span>
												</div>
												<div :class="'navs_list ' + (1 == navIndex1?'active':'')"
													@click="changeNav1(item={id:1})">
													<i v-if="1 != navIndex1" class="icons" style="font-size:40px;"><svg
															viewBox="0 0 20.413 12.425" width="1em" height="1em"
															fill="currentColor" aria-hidden="true" focusable="false">
															<use
																xlink:href="/icons/icon.svg#icon_game_menu_active_4--sprite">
															</use>
														</svg></i>
													<img v-else src="/icons/active/icon_game_menu_active_8.png" />
													<span>{{ $t('l_zhenren') }}</span>
												</div>
												<div :class="'navs_list ' + (7 == navIndex1?'active':'')"
													@click="changeNav1(item={id:7})">
													<i v-if="7 != navIndex1" class="icons"><svg
															viewBox="0 0 20.413 12.425" width="1em" height="1em"
															fill="currentColor" aria-hidden="true" focusable="false"
															style="font-size:40px;">
															<use
																xlink:href="/icons/icon.svg#icon_game_menu_active_1--sprite">
															</use>
														</svg></i>
													<img v-else src="/icons/active/icon_game_menu_active_1.png" />
													<span>{{ $t('l_qipai') }}</span>
												</div>
												<div :class="'navs_list ' + (6 == navIndex1?'active':'')"
													@click="changeNav1(item={id:6})">
													<i v-if="6 != navIndex1" class="icons" style="font-size:40px;"><svg
															viewBox="0 0 20.413 12.425" width="1em" height="1em"
															fill="currentColor" aria-hidden="true" focusable="false">
															<use
																xlink:href="/icons/spr.svg#icon_dtfl_by_0--svgSprite:all">
															</use>
														</svg></i>
													<img v-else src="/icons/active/icon_dtfl_by_1.png" />
													<span>{{ $t('l_buyu') }}</span>
												</div>

												<div :class="'navs_list ' + (4 == navIndex1?'active':'')"
													@click="changeNav1(item={id:4})">
													<i v-if="4 != navIndex1" class="icons" style="font-size:40px;"><svg
															viewBox="0 0 20.413 12.425" width="1em" height="1em"
															fill="currentColor" aria-hidden="true" focusable="false">
															<use
																xlink:href="/icons/icon.svg#icon_game_menu_active_5--sprite">
															</use>
														</svg></i>
													<img v-else src="/icons/active/icon_game_menu_active_4.png" />
													<span>{{ $t('l_tiyu') }}</span>
												</div>

											</div>
										</div>
									</el-scrollbar>
								</div>

								<div class="pc_gamesbox">
									<div class="pc_gameslist" v-for="(item,index) in gameList" :key="index"
										:id="'gameslist1_'+item.key">
										<div class="titles">
											<div class="left">
												<!-- <img :src="'/icons/active/icon_game_menu_active_'+item.key+'.png'"> -->
												<img :src="item.img">
												<span>{{$t(item.lang)}}</span>
											</div>
											<div class="right" @click="goTypeDetaliList(index,item)"
												v-if="index!='key_0' && index != 'key_3' && index != 'key_4' && index != 'key_1'">
												{{$t('l_gengduo')}}
											</div>
										</div>
										<div class="lists" v-if="item.key == 0">
											<div class="items" v-for="(vo,key) in item.list" :key="key"
												@click="goGame(vo)">
												<div class="box" style="height: 133px;">
													<img class="pic" :src="vo.image" />
													<div class="typeone one" v-if="(vo.id % 6) <= 1.5">
														<!-- <img class="cspic"
															:src="$config.imageURL+'/gametype/'+vo.platType+'.png'" /> -->
														<span style="font-size: 14px;">{{vo.platType}}</span>
														<span>{{vo.name}}</span>
													</div>
													<div class="typeone two"
														v-if="(vo.id % 6) <= 3 && (vo.id % 6) > 1.5">
														<!-- <img class="cspic"
															:src="$config.imageURL+'/gametype/'+vo.platType+'.png'" /> -->
														<span style="font-size: 14px;">{{vo.platType}}</span>
														<span>{{vo.name}}</span>
													</div>
													<div class="typeone three"
														v-if="(vo.id % 6) <= 4.5 && (vo.id % 6) > 3">
														<!-- <img class="cspic"
															:src="$config.imageURL+'/gametype/'+vo.platType+'.png'" /> -->
														<span style="font-size: 14px;">{{vo.platType}}</span>
														<span>{{vo.name}}</span>
													</div>
													<div class="typeone four"
														v-if="(vo.id % 6) <= 6 && (vo.id % 6) > 4.5">
														<!-- <img class="cspic"
															:src="$config.imageURL+'/gametype/'+vo.platType+'.png'" /> -->
														<span style="font-size: 14px;">{{vo.platType}}</span>
														<span>{{vo.name}}</span>
													</div>
													<div class="typeone five"
														v-if="(vo.id % 6) <= 7.5 && (vo.id % 6) > 6">
														<!-- <img class="cspic"
															:src="$config.imageURL+'/gametype/'+vo.platType+'.png'" /> -->
														<span style="font-size: 14px;">{{vo.platType}}</span>
														<span>{{vo.name}}</span>
													</div>
													<div class="typeone five"
														v-if="(vo.id % 6) < 10 && (vo.id % 6) > 7.5">
														<!-- <img class="cspic"
															:src="$config.imageURL+'/gametype/'+vo.platType+'.png'" /> -->
														<span style="font-size: 14px;">{{vo.platType}}</span>
														<span>{{vo.name}}</span>
													</div>
													<div class="tuijian" v-if="vo.is_suggest==1">
														{{$t('l_tuijian')}}
													</div>
													<img class="lovebtn" src="/icons/index/no_love.png" />
												</div>
											</div>

										</div>
										<div class="lists" v-else>
											<div class="items" v-for="(vo,key) in item.list" :key="key"
												@click="goGame(vo)">
												<div class="box">
													<img class="pic" :src="vo.image" />
													<div class="typeone">
														<!-- <img class="cspic"
															:src="$config.imageURL+'/gametype/'+vo.platType+'.png'" /> -->
														<span style="font-size: 14px;">{{vo.platType}}</span>
														<span>{{vo.name}}</span>
													</div>
													<div class="tuijian" v-if="vo.is_suggest==1">
														{{$t('l_tuijian')}}
													</div>
													<img class="lovebtn" src="/icons/index/no_love.png" />
												</div>
											</div>

										</div>
									</div>
								</div>
							</div>
							<Bottom :navIndex="navIndex1" :navs="navs" :changeNav="changeNav1"></Bottom>
						</div>
					</div>
					<div class="pc_goTop" @click="gotop1" v-if="scrollTop1>100">
						<i><svg viewBox="0 0 20.413 12.425" width="1em" height="1em" fill="currentColor"
								aria-hidden="true" focusable="false">
								<use xlink:href="/icons/icon.svg#comm_icon_fhdb--sprite"></use>
							</svg></i>
						<span>{{$t('l_zhiding')}}</span>
					</div>
				</div>

				<div class="right_img_pc" v-if="is_right">
					<div style="display: flex;justify-content: end;" @click="is_right=false">
						<img src="../../assets/images/yh/main.f9fa3765529e3b5b42fa.png"
							style="width: 20px;height:20px;">
					</div>
					<div @click="navigate_right()">
						<img :src="config.right_img" alt="" style="width:100px;height:100px;">
					</div>
				</div>


				<div class="right_img_pc2" v-if="is_right2">
					<div style="display: flex;justify-content: end;" @click="is_right2=false">
						<img src="../../assets/images/yh/main.f9fa3765529e3b5b42fa.png"
							style="width: 20px;height:20px;">
					</div>

					<swiper style="width:100px;height:100px;" ref="mySwiper" :options="options">
						<swiper-slide v-for="(item,index) in config.gundong_list" :key="index">
							<img :src="item.pic" @click="navigate_right2(item.url)" style="width:100px;height:100px;" />
						</swiper-slide>
						<!-- <div class="swiper-pagination" slot="pagination"></div> -->
					</swiper>
					<!-- <div  @click="navigate_right2()">

					<swiper class="swiperbox" ref="mySwiper" :options="options" >
							<swiper-slide v-for="(item,index) in swiperList" :key="index">
								<img :src="item.pic" />
							</swiper-slide>
							<div class="swiper-pagination" slot="pagination"></div>
							</swiper>


					<img :src="config.right_img2" alt="" style="width:100px;height:100px;">
				</div> -->
				</div>


			</el-col>
			<el-col :sm="0" :xs="24">
				<div class="index pageContainer">
					<IndexHeader :navIndex="navIndex" :navs="navs" :changeNav="changeNav" ref="indexheader"
						@go_recharge="go_recharge()"></IndexHeader>
					<div class="container scroll-containers" @scroll="pageScroll" style="padding-bottom: 142px;">

						<div style="padding: 0 0.2rem;">
							<swiper class="swiperbox" ref="mySwiper" :options="options">
								<swiper-slide v-for="(item,index) in swiperList" :key="index">
									<img :src="item.pic" />
								</swiper-slide>
								<div class="swiper-pagination" slot="pagination"></div>
							</swiper>
						</div>

						<div class="notice" style="padding: 0 0.2rem;">
							<!-- <img class="laba" src='/icons/index/laba.png' /> -->
							<div class="svg-icon-UPCeJ"
								style="margin-right: 5px;fill: var(--theme-mine-icon-color); stroke: var(--theme-mine-icon-color); width: 18px; height: 18px; color: var(--theme-mine-icon-color);">
								<svg width="20" height="20" viewBox="0 0 27 27" fill="none"
									xmlns="http://www.w3.org/2000/svg">
									<g id="icon/å…¬å‘Š">
										<path id="è·¯å¾„" fill-rule="evenodd" clip-rule="evenodd"
											d="M15.1938 6.50026C16.2604 5.87782 17.6002 6.6472 17.6002 7.88218V24.1175C17.6002 25.3525 16.2604 26.1219 15.1938 25.4995L7.21796 20.8452C7.21027 20.8407 7.20554 20.8325 7.20554 20.8236C7.20554 20.8097 7.19432 20.7985 7.18049 20.7985L4.80073 20.7993C3.91687 20.7996 3.2002 20.0832 3.2002 19.1993V12.7993C3.2002 11.9159 3.91621 11.1996 4.79966 11.1993L7.1822 11.1985C7.19509 11.1985 7.20554 11.1881 7.20554 11.1752C7.20554 11.1669 7.20995 11.1592 7.21712 11.155L15.1938 6.50026Z"
											fill="currentColor"></path>
										<path id="è·¯å¾„_2" opacity="0.403068"
											d="M20.5254 20.8001C21.6836 19.5716 22.3999 17.8746 22.3999 16.0001C22.3999 14.1256 21.6836 12.4285 20.5254 11.2001"
											stroke="currentColor" stroke-width="2.4" stroke-linecap="round"></path>
										<path id="è·¯å¾„_3" opacity="0.403068"
											d="M24.8225 24C26.8356 21.6612 27.9927 18.9247 27.9927 16C27.9927 13.0753 26.8356 10.3388 24.8225 8"
											stroke="currentColor" stroke-width="2.4" stroke-linecap="round"></path>
									</g>
									<defs>
										<linearGradient id="paint0_linear_1365_114851" x1="3.2002" y1="5.09601"
											x2="3.2002" y2="26.9037" gradientUnits="userSpaceOnUse">
											<stop stop-color="#81DAFF"></stop>
											<stop offset="1" stop-color="#307FCD"></stop>
										</linearGradient>
									</defs>
								</svg>
							</div>
							<swiper class="noticeswiperbox" ref="noticeSwiper" :options="NoticeOptions">
								<swiper-slide v-for="(item,index) in noticeData" :key="index">
									<span class="curp" @click="gonoticedetail(item.id)"
										:style="noticeIndex==index?'transform: translateX(-'+((item.width*0.01)+12.2)+'rem);transition:50s linear 0.5s;':''">{{item.title}}</span>
								</swiper-slide>
							</swiper>
							<div @click="gonotice" class="svg-icon-UPCeJ notice-email-QdgGP"
								style="margin-right: 5px;fill: #1c8ac1; stroke: var(--theme-mine-icon-color); width: 18px; height: 18px; color: var(--theme-mine-icon-color);"><svg viewBox="0 0 42 42" fill="none"
									xmlns="http://www.w3.org/2000/svg">
									<g clip-path="url(#clip0_2967_63844)">
										<path
											d="M2.60449 15.7822H39.3969V37.0773C39.3969 39.1614 37.7074 40.851 35.6233 40.851H6.37813C4.294 40.851 2.60449 39.1614 2.60449 37.0773V15.7822Z"
											fill="currentColor"></path>
										<path
											d="M19.7896 1.01218C20.4902 0.426319 21.5098 0.426321 22.2104 1.01218L38.6635 14.771C40.016 15.902 39.2162 18.1052 37.4531 18.1052H4.54692C2.7838 18.1052 1.984 15.902 3.33653 14.771L19.7896 1.01218Z"
											fill="currentColor"></path>
										<rect x="4.49023" y="13.9268" width="33.0189" height="25.9972" rx="3.77363"
											fill="#FFF0B9"></rect>
										<path
											d="M19.8201 25.5887C20.5093 25.0373 21.4886 25.0373 22.1778 25.5887L36.8162 37.3016C38.2088 38.4158 37.4209 40.6616 35.6374 40.6616H6.36049C4.577 40.6616 3.7891 38.4158 5.18167 37.3016L19.8201 25.5887Z"
											fill="currentColor"></path>
										<path d="M21.8709 24.5545L38.4685 17.7651L37.5098 38.0649L21.8709 24.5545Z"
											fill="currentColor"></path>
										<path d="M20.2789 24.5558L3.68136 17.7663L4.49023 38.0674L20.2789 24.5558Z"
											fill="currentColor"></path>
									</g>
									<defs>
										<clipPath id="clip0_2967_63844">
											<rect width="42" height="42" fill="white"></rect>
										</clipPath>
									</defs>
								</svg></div>
							<!-- <i class="icon_notice" @click="gonotice" style="background-position: -5.3375rem -3.74rem;
    background-size: 6.775rem 6.74375rem;"></i> -->
							<!-- <img src="../../assets/images/yh/icon_message2.png"  @click="gonotice" style="border-radius: 2px;width:0.2rem;height:0.15rem"/> -->
						</div>
						<div class="tabs" style="padding: 0 0.2rem;">
							<div class="tabs_bar">
								<div :class="'navs_list ' + (0 == navIndex?'active':'')"
									@click="changeNav(item={id:0})">
									<i v-if="0 != navIndex" class="icons"><svg viewBox="0 0 20.413 12.425" width="1em"
											height="1em" fill="currentColor" aria-hidden="true" focusable="false">
											<use xlink:href="/icons/spr.svg#icon_dtfl_rm_0--svgSprite:all"></use>
										</svg></i>
									<img v-else src="/icons/active/icon_dtfl_rm_1.png" />
									<span>{{ $t('l_remen') }}</span>
								</div>
								<div :class="'navs_list ' + (2 == navIndex?'active':'')"
									@click="changeNav(item={id:2})">
									<i v-if="2 != navIndex" class="icons"><svg viewBox="0 0 20.413 12.425" width="1em"
											height="1em" fill="currentColor" aria-hidden="true" focusable="false">
											<use xlink:href="/icons/spr.svg#icon_dtfl_dz_0--svgSprite:all"></use>
										</svg></i>
									<img v-else src="/icons/active/icon_dtfl_dz_1.png" />
									<span>{{ $t('l_dianzi') }}</span>
								</div>
								<div :class="'navs_list ' + (3 == navIndex?'active':'')"
									@click="changeNav(item={id:3})">
									<i v-if="3 != navIndex" class="icons"><svg viewBox="0 0 20.413 12.425" width="1em"
											height="1em" fill="currentColor" aria-hidden="true" focusable="false">
											<use xlink:href="/icons/icon.svg#icon_game_menu_active_8--sprite"></use>
										</svg></i>
									<img v-else src="/icons/active/icon_game_menu_active_8.png" />
									<span>{{ $t('l_caipiao') }}</span>
								</div>
								<div :class="'navs_list ' + (1 == navIndex?'active':'')"
									@click="changeNav(item={id:1})">
									<i v-if="1 != navIndex" class="icons"><svg viewBox="0 0 20.413 12.425" width="1em"
											height="1em" fill="currentColor" aria-hidden="true" focusable="false">
											<use xlink:href="/icons/icon.svg#icon_game_menu_active_4--sprite"></use>
										</svg></i>
									<img v-else src="/icons/active/icon_game_menu_active_4.png" />
									<span>{{ $t('l_zhenren') }}</span>
								</div>
								<div :class="'navs_list ' + (7 == navIndex?'active':'')"
									@click="changeNav(item={id:7})">
									<i v-if="7 != navIndex" class="icons"><svg viewBox="0 0 20.413 12.425" width="1em"
											height="1em" fill="currentColor" aria-hidden="true" focusable="false">
											<use xlink:href="/icons/icon.svg#icon_game_menu_active_1--sprite"></use>
										</svg></i>
									<img v-else src="/icons/active/icon_game_menu_active_1.png" />
									<span>{{ $t('l_qipai') }}</span>
								</div>
								<div :class="'navs_list ' + (6 == navIndex?'active':'')"
									@click="changeNav(item={id:6})">
									<i v-if="6 != navIndex" class="icons"><svg viewBox="0 0 20.413 12.425" width="1em"
											height="1em" fill="currentColor" aria-hidden="true" focusable="false">
											<use xlink:href="/icons/spr.svg#icon_dtfl_by_0--svgSprite:all"></use>
										</svg></i>
									<img v-else src="/icons/active/icon_dtfl_by_1.png" />
									<span>{{ $t('l_buyu') }}</span>
								</div>

								<div :class="'navs_list ' + (4 == navIndex?'active':'')"
									@click="changeNav(item={id:4})">
									<i v-if="4 != navIndex" class="icons"><svg viewBox="0 0 20.413 12.425" width="1em"
											height="1em" fill="currentColor" aria-hidden="true" focusable="false">
											<use xlink:href="/icons/icon.svg#icon_game_menu_active_5--sprite"></use>
										</svg></i>
									<img v-else src="/icons/active/icon_game_menu_active_5.png" />
									<span>{{ $t('l_tiyu') }}</span>
								</div>

							</div>
							<!-- <div class="tabs_bar">
								<div :class="'navs_list ' + (item.id == navIndex?'active':'')"
									v-for="(item,index) in navs" :key="index" @click="changeNav(item)">
									<i v-if="item.id != navIndex" class="icons"><svg viewBox="0 0 20.413 12.425"
											width="1em" height="1em" fill="currentColor" aria-hidden="true"
											focusable="false">
											<use :xlink:href="'/icons/icon.svg#'+item.key+'--sprite'"></use>
										</svg></i>
									<img v-else :src="'/icons/active/'+item.key+'.png'" />
									<span>{{item.name}}</span>
								</div>
							</div> -->
						</div>

						<div v-if="scrollTop>180" class="top_tabever_parent">
							<div class="tabs top_tabever">
								<div class="tabs_bar">
									<!-- <div :class="'navs_list ' + (item.id == navIndex?'active':'')"
										v-for="(item,index) in navs" :key="index" @click="changeNav(item)">
										<i v-if="item.id != navIndex" class="icons">
											
											<svg viewBox="0 0 20.413 12.425"
												width="1em" height="1em" fill="currentColor" aria-hidden="true"
												focusable="false">
												<use :xlink:href="'/icons/icon.svg#'+item.key+'--sprite'"></use>
											</svg>
										
										</i>
										<img v-else :src="'/icons/active/'+item.key+'.png'" />
										<span>{{item.name}}</span>
									</div> -->


									<div :class="'navs_list ' + (0 == navIndex?'active':'')"
										@click="changeNav(item={id:0})">
										<i v-if="0 != navIndex" class="icons"><svg viewBox="0 0 20.413 12.425"
												width="1em" height="1em" fill="currentColor" aria-hidden="true"
												focusable="false">
												<use xlink:href="/icons/spr.svg#icon_dtfl_rm_0--svgSprite:all"></use>
											</svg></i>
										<img v-else src="/icons/active/icon_dtfl_rm_1.png" />
										<span>{{ $t('l_remen') }}</span>
									</div>
									<div :class="'navs_list ' + (2 == navIndex?'active':'')"
										@click="changeNav(item={id:2})">
										<i v-if="2 != navIndex" class="icons"><svg viewBox="0 0 20.413 12.425"
												width="1em" height="1em" fill="currentColor" aria-hidden="true"
												focusable="false">
												<use xlink:href="/icons/spr.svg#icon_dtfl_dz_0--svgSprite:all"></use>
											</svg></i>
										<img v-else src="/icons/active/icon_dtfl_dz_1.png" />
										<span>{{ $t('l_dianzi') }}</span>
									</div>
									<div :class="'navs_list ' + (3 == navIndex?'active':'')"
										@click="changeNav(item={id:3})">
										<i v-if="3 != navIndex" class="icons"><svg viewBox="0 0 20.413 12.425"
												width="1em" height="1em" fill="currentColor" aria-hidden="true"
												focusable="false">
												<use xlink:href="/icons/icon.svg#icon_game_menu_active_8--sprite"></use>
											</svg></i>
										<img v-else src="/icons/active/icon_game_menu_active_5.png" />
										<span>{{ $t('l_caipiao') }}</span>
									</div>
									<div :class="'navs_list ' + (1 == navIndex?'active':'')"
										@click="changeNav(item={id:1})">
										<i v-if="1 != navIndex" class="icons"><svg viewBox="0 0 20.413 12.425"
												width="1em" height="1em" fill="currentColor" aria-hidden="true"
												focusable="false">
												<use xlink:href="/icons/icon.svg#icon_game_menu_active_4--sprite"></use>
											</svg></i>
										<img v-else src="/icons/active/icon_game_menu_active_8.png" />
										<span>{{ $t('l_zhenren') }}</span>
									</div>
									<div :class="'navs_list ' + (7 == navIndex?'active':'')"
										@click="changeNav(item={id:7})">
										<i v-if="7 != navIndex" class="icons"><svg viewBox="0 0 20.413 12.425"
												width="1em" height="1em" fill="currentColor" aria-hidden="true"
												focusable="false">
												<use xlink:href="/icons/icon.svg#icon_game_menu_active_1--sprite"></use>
											</svg></i>
										<img v-else src="/icons/active/icon_game_menu_active_1.png" />
										<span>{{ $t('l_qipai') }}</span>
									</div>
									<div :class="'navs_list ' + (6 == navIndex?'active':'')"
										@click="changeNav(item={id:6})">
										<i v-if="6 != navIndex" class="icons"><svg viewBox="0 0 20.413 12.425"
												width="1em" height="1em" fill="currentColor" aria-hidden="true"
												focusable="false">
												<use xlink:href="/icons/spr.svg#icon_dtfl_by_0--svgSprite:all"></use>
											</svg></i>
										<img v-else src="/icons/active/icon_dtfl_by_1.png" />
										<span>{{ $t('l_buyu') }}</span>
									</div>

									<div :class="'navs_list ' + (4 == navIndex?'active':'')"
										@click="changeNav(item={id:4})">
										<i v-if="4 != navIndex" class="icons"><svg viewBox="0 0 20.413 12.425"
												width="1em" height="1em" fill="currentColor" aria-hidden="true"
												focusable="false">
												<use xlink:href="/icons/icon.svg#icon_game_menu_active_5--sprite"></use>
											</svg></i>
										<img v-else src="/icons/active/icon_game_menu_active_4.png" />
										<span>{{ $t('l_tiyu') }}</span>
									</div>





								</div>
							</div>
						</div>
						<div class="gamesbox">
							<div class="gameslist" v-for="(item,index) in gameList" :key="index"
								:id="'gameslist_'+item.key">
								<div class="titles">
									<div class="left">
										<!-- <img :src="'/icons/active/icon_game_menu_active_'+item.key+'.png'"> -->
										<img :src="item.img">
										<span>{{$t(item.lang)}}</span>
									</div>
									<div v-if="item.key != 3 && item.key != 4 && item.key != 1 && item.key != 0"
										class="right" @click="goTypeDetaliList(index,item)">
										{{$t('l_quanbu')}}
									</div>
								</div>
								<div class="lists" v-if="item.key == 0">
									<div class="items" v-for="(vo,key) in item.list" :key="key" @click="goGame(vo)">

										<div class="box" style="width: 2.1rem;height: 2.1rem;">
											<img class="pic" :src="vo.image" />
											<div class="typeone one" v-if="(vo.id % 6) <= 1.5">
												<!-- <img class="cspic"
													:src="$config.imageURL+'/gametype/'+vo.platType+'.png'" /> -->
												<span style="font-size: .22rem;">{{vo.platType}}</span>
												<span>{{vo.name}}</span>
											</div>
											<div class="typeone two" v-if="(vo.id % 6) <= 3 && (vo.id % 6) > 1.5">
												<!-- <img class="cspic"
													:src="$config.imageURL+'/gametype/'+vo.platType+'.png'" /> -->
												<span style="font-size: .22rem;">{{vo.platType}}</span>
												<span>{{vo.name}}</span>
											</div>
											<div class="typeone three" v-if="(vo.id % 6) <= 4.5 && (vo.id % 6) > 3">
												<!-- <img class="cspic"
													:src="$config.imageURL+'/gametype/'+vo.platType+'.png'" /> -->
												<span style="font-size: .22rem;">{{vo.platType}}</span>
												<span>{{vo.name}}</span>
											</div>
											<div class="typeone four" v-if="(vo.id % 6) <= 6 && (vo.id % 6) > 4.5">
												<!-- <img class="cspic"
													:src="$config.imageURL+'/gametype/'+vo.platType+'.png'" /> -->
												<span style="font-size: .22rem;">{{vo.platType}}</span>
												<span>{{vo.name}}</span>
											</div>
											<div class="typeone five" v-if="(vo.id % 6) <= 7.5 && (vo.id % 6) > 6">
												<!-- <img class="cspic"
													:src="$config.imageURL+'/gametype/'+vo.platType+'.png'" /> -->
												<span style="font-size: .22rem;">{{vo.platType}}</span>
												<span>{{vo.name}}</span>
											</div>
											<div class="typeone five" v-if="(vo.id % 6) < 10 && (vo.id % 6) > 7.5">
												<!-- <img class="cspic"
													:src="$config.imageURL+'/gametype/'+vo.platType+'.png'" /> -->
												<span style="font-size: .22rem;">{{vo.platType}}</span>
												<span>{{vo.name}}</span>
											</div>
											<!-- <div class="tuijian" v-if="vo.is_suggest==1">
												推荐
											</div>
											<img class="lovebtn" src="/icons/index/no_love.png" /> -->
										</div>
									</div>

								</div>
								<div class="lists" v-else>
									<div class="items" v-for="(vo,key) in item.list" :key="key" @click="goGame(vo)">
										<div class="box">

											<img class="pic" :src="vo.image" style="width: 2.1rem;height: 2.1rem;"
												v-if="item.key == 3" />
											<img class="pic" :src="vo.image" v-else />
											<div class="typeone">
												<!-- <img class="cspic"
													:src="$config.imageURL+'/gametype/'+vo.platType+'.png'" /> -->
												<span style="font-size: .22rem;">{{vo.platType}}</span>
												<span>{{vo.name}}</span>
											</div>

											<!-- <div class="tuijian" v-if="vo.is_suggest==1">
												推荐
											</div>
											<img class="lovebtn" src="/icons/index/no_love.png" /> -->
										</div>
									</div>


								</div>
							</div>

						</div>


					</div>


					<Tabnav :activeInd="tabnavIndex" :template_color="config.template_color"></Tabnav>

					<goTop v-if="scrollTop>100" style="		z-index: 9999;"></goTop>

					<gameWebview ref="gameWebview" :heightvalue="heightvalue"></gameWebview>
				</div>

				<div class="right_img" v-if="is_right">
					<div style="display: flex;justify-content: end;" @click="is_right=false">
						<img src="../../assets/images/yh/main.f9fa3765529e3b5b42fa.png"
							style="width: 0.4rem;height:0.4rem;">
					</div>
					<div @click="navigate_right()">
						<img :src="config.right_img" alt="" style="width: 1.5rem;height: 1.5rem;">
					</div>
				</div>

				<div class="right_img2" v-if="is_right2">
					<div style="display: flex;justify-content: end;" @click="is_right2=false">
						<img src="../../assets/images/yh/main.f9fa3765529e3b5b42fa.png"
							style="width: 0.4rem;height:0.4rem;">
					</div>
					<swiper style="width:1.5rem;height:1.5rem;" ref="mySwiper" :options="options">
						<swiper-slide v-for="(item,index) in config.gundong_list" :key="index">
							<img :src="item.pic" @click="navigate_right2(item.url)"
								style="width:1.5rem;height:1.5rem;" />
						</swiper-slide>
						<!-- <div class="swiper-pagination" slot="pagination"></div> -->
					</swiper>
					<!-- <div  @click="navigate_right2()">
					<img :src="config.right_img2" alt="" style="width: 1.5rem;height: 1.5rem;">
				</div> -->
				</div>



				<div class="tk" v-show="is_recharge">

					<Recharge @close_tk="close_tk()"></Recharge>
				</div>


				<div class="mask" v-show="is_recharge" @click="is_recharge=0"></div>





			</el-col>
		</el-row>
		<newmanBox ref="nBox"></newmanBox>



	</div>

</template>

<script>
	import {
		swiper,
		swiperSlide
	} from 'vue-awesome-swiper'

	import IndexHeader from '../../components/indexHeader.vue'
	import PcHedaer from '../../components/pcheader.vue'
	import Tabnav from '../../components/Tabnav.vue'
	import goTop from '../../components/goTop.vue'
	import gameWebview from '../../components/gameWebview.vue'
	import PcDrawer from '../../components/pcdrawer.vue'
	import newmanBox from '../../components/newmanBox.vue'
	import Bottom from '../../components/bottom.vue'
	import Recharge from '../../components/recharge.vue'
	let vm = null;
	export default {
		components: {
			gameWebview,
			goTop,
			Tabnav,
			IndexHeader,
			swiper,
			swiperSlide,
			PcHedaer,
			PcDrawer,
			newmanBox,
			Bottom,
			Recharge
		},
		data() {
			return {
				is_recharge: 0,
				scrollTop: 0,
				tabnavIndex: 0,
				navIndex: 0,
				scrollTop1: 0,
				navIndex1: 0,
				navs: [{
						id: 0,
						name: this.$t('l_remen'),
						key: 'icon_game_menu_active_0',
					},
					{
						id: 2,
						name: this.$t('l_dianzi'),
						key: 'icon_game_menu_active_3',
					},
					{
						id: 7,
						name: this.$t('l_qipai'),
						key: 'icon_game_menu_active_1',
					},
					{
						id: 6,
						name: this.$t('l_buyu'),
						key: 'icon_game_menu_active_2',
					},
					{
						id: 1,
						name: this.$t('l_zhenren'),
						key: 'icon_game_menu_active_8',
					},
					{
						id: 4,
						name: this.$t('l_tiyu'),
						key: 'icon_game_menu_active_4',
					},
					{
						id: 3,
						name: this.$t('l_caipiao'),
						key: 'icon_game_menu_active_5',
					},

					// {
					// 	id: -2,
					// 	name: '最 近',
					// 	key: 'icon_game_menu_active_100',
					// },
					// {
					// 	id: -3,
					// 	name: '收 藏',
					// 	key: 'icon_game_menu_active_101',
					// },
					{
						id: -4,
						name: this.$t('l_sousuo'),
						key: 'comm_icon_ss',
					},
				],
				gameList: [],
				noticeData: [],
				noticeIndex: -1,
				NoticeOptions: {
					direction: 'vertical',
					loop: true,
					autoplay: {
						// //swiper手动滑动之后自动轮播失效的解决方法,包括触碰，拖动，点击pagination,重新启动自动播放
						disableOnInteraction: false,
						// // 自动播放时间：毫秒
						delay: 20000,
					},
					on: {
						slideChangeTransitionEnd: function() {
							vm.noticeIndex = this.activeIndex
						},
					}
				},
				options: {
					loop: true,
					autoplay: {
						//swiper手动滑动之后自动轮播失效的解决方法,包括触碰，拖动，点击pagination,重新启动自动播放
						disableOnInteraction: false,
						// 自动播放时间：毫秒
						delay: 2000,
					},
					pagination: {
						el: ".swiper-pagination",
						clickable: true,
					},
				},
				swiperList: [],
				heightvalue: '',
				config: {},
				is_right: false,
				is_right2: false,
				dl_kt: false,
			};
		},
		computed: {},
		created() {

			vm = this
			this.getBanner()
			this.getNotice()
			this.getIndexGames();

			// if (localStorage.getItem('token') && localStorage.getItem('checked') != "1") {
			// 	this.opennewmanbox()
			// }
			this.heightvalue = window.innerHeight;
			this.getIndex()
			if (!localStorage.getItem('locale')) {
				localStorage.setItem('locale', 'nl')
			}
		},
		mounted() {
			// this.$api.caipiaoLoginReg({username:'',password:''}, (res) => {
			// 		if (res.code == 0) {
			// 			console.log('success')
			// 		} else {
			// 			this.$message.error(res.msg);
			// 		}
			// 	});
			// this.$api.caipiaoBerRecord({},(res3)=>{
			// 							console.log(res3,'测试res3')

			// 						})
			// 						this.$api.caipiaotransferOut({pass:'123456'},(res3)=>{
			// 							console.log(res3,'测试res4')

			// 						})


		},
		methods: {
			go_recharge() {
				this.is_recharge = 1;
			},
			close_tk() {
				this.is_recharge = 0;
			},
			navigate_right2(url) {
				window.location.href = url;
				// this.$router.push({
				// 	path: this.config.right_url
				// })
			},
			navigate_right() {
				window.location.href = this.config.right_url;
				// this.$router.push({
				// 	path: this.config.right_url
				// })
			},
			getIndex() {
				const loading = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				let that = this;
				this.$api.ConfigGetConfig({
					key: 'app_down_url',
				}, (res) => {
					loading.close()
					if (res.code == 0) {
						that.config = res.data[1].value;
						if (that.config.is_right_on == 0) {
							that.is_right = true;
						}
						if (that.config.is_right_img2 == 1) {
							that.is_right2 = true;
						}
						if (that.config.is_dl_tk == 1) {
							that.dl_kt = true;
						}
						if (res.data[1].value.is_alert_on == 0 && !localStorage.getItem('token')) {
							this.opennewmanbox()
						}
						if (res.data[1].value.is_dl_tk == 1 && localStorage.getItem('token')) {
							//登录弹窗
							this.opennewmanbox2()
						}
						// window.open(res.data[0].value)
						// that.$router.push('../../index/downloadapp?url=' + res.data[0].value)
					} else {
						// that.$message.error(res.msg);
					}
				})
			},
			goTypeDetaliList(keyNum, ite) {
				console.log(keyNum);
				let userInfo = localStorage.getItem('userInfo')
				if (!userInfo) {
					this.$message.error(this.$t('l_qingdenglu'));
					return
				}
				// return false;
				// if(keyNum==0){
				// 	this.$router.push({ path: '/index/typeDetaliList', query: { id: '-1' }})
				// }else{
				this.$router.push({
					path: '/index/typeDetaliList',
					query: {
						id: keyNum,
						type: ite.key,
						name: this.$t(ite.lang)
					}
				})
				// }
			},
			gonotice() {
				this.$router.push('../../mine/notice')
			},
			gonoticedetail(e) {
				this.$router.push({
					path: '../../mine/noticedetail',
					query: {
						id: e
					}
				})
			},
			// opennewmanbox() {
			// 	this.$nextTick(() => {
			// 		this.$refs.nBox.openForget()
			// 	})
			// },
			closenewmanbox() {
				this.$refs.nBox.closeForget()
			},
			openMenus() {
				this.$refs.pcDrawer.openMenus()
			},
			closeMenus() {
				this.$refs.pcDrawer.closeMenus()
			},
			//转入
			transfer_in() {

			},
			//转出
			transfer_out() {
				this.$api.caipiaotransferOut({}, (res2) => {
					console.log(res2, '看看能不能读取到用户新')
				});
			},
			goGame(item) {
				console.log(item, '？')

				let userInfo = localStorage.getItem('userInfo')
				let token = localStorage.getItem('token')
				if (!userInfo || !token) {
					// this.$message.error(this.$t('l_qingdenglu'));
					console.log('未登录');
					this.$refs.indexheader.openLogin()
					this.$refs.pcHedaer.openLogin();


					return
				}
				userInfo = JSON.parse(userInfo);
				let typeid = '';
				let type_name = '';
				if (item.typeid) {
					typeid = item.typeid
				}
				if (item.type_name) {
					type_name = item.type_name
				}
				if (item.gameType == 2) {
					//启动彩票
					this.$api.caipiaoAddUser({
						typeid: typeid,
						type_name: type_name
					}, (res) => {
						console.log(res, 'res')
						if (res.data) {
							localStorage.setItem('caipiao_url', res.data.url)
							// this.$router.push('/index/iframeCai?url='+res.data.url)
							window.location.href = res.data.url
						} else {
							//处理一下  有时候服务器会返回拼接好的请求参数  不知道怎么绝技  先前端解决一下 
							// 使用正则表达式匹配第一个左括号后面的内容
							var match = res.match(/\{.*\}/);

							// match[0] 存储了匹配到的内容
							var news_res = match[0];
							console.log(news_res, 'news_res')
							let url = JSON.parse(news_res);
							console.log(url, '是否转成功---')
							window.location.href = url
							// localStorage.setItem('caipiao_url',url)
							// this.$router.push('/index/iframeCai?url='+url)
						}

						// window.open(res.data.url)  下面这个好像会以pc打开
					})
				} else if (item.gameType == 0) {
					//热门进入pg游戏
					const loading = this.$loading({
						lock: true,
						text: 'Loading',
						spinner: 'el-icon-loading',
						background: 'rgba(0, 0, 0, 0.7)'
					});
					this.$api.gameOpenGame({
						platType: item.platType,
						gameType: item.gameType,
						gameCode: item.api_id,
					}, (res) => {
						loading.close()

						if (res.code == 0) {
							// this.$refs.gameWebview.show(res.data)
							// this.full()
							console.log(res)
							// return
							window.location.href = res.data.url
							// localStorage.setItem('caipiao_url',res.data.url)
							// this.$router.push('/index/iframeCai?url='+res.data.url)
						} else {
							this.$message.error(res.msg);
						}
					})
				} else {
					//    全部调整
					// 	id=key_1&type=1&platType=1
					this.$router.push(
						`/index/typeDetaliList?id=key_1&type=1&platType=1`)
					// 	this.$router.push(
					// `/index/typeDetaliList?id=key_${item.gameType}&type=${item.gameType}&platType=${item.id}`)
					//直接调整到页面
					return

					const loading = this.$loading({
						lock: true,
						text: 'Loading',
						spinner: 'el-icon-loading',
						background: 'rgba(0, 0, 0, 0.7)'
					});
					this.$api.gameOpenGame({
						platType: item.platType,
						gameType: item.gameType,
						gameCode: item.code,
					}, (res) => {

						if (res.code == 0) {
							// this.$refs.gameWebview.show(res.data)
							// this.full()
							// console.log(res)
							// return
							window.location.href = res.data.url
							loading.close()
						} else {
							this.$message.error(res.msg);
						}
					})
					//下面暂时注释一下
					// if ((item.code && item.is_hot == 1 && item.type == 1) || (item.gameType == 3 || item.gameType == 4 || item
					// 		.gameType == 1)) {
					// 	let ingress = this.$F.isMobile() ? 'device2' : 'device1';
					// 	if (item.ingress) {
					// 		ingress = item.ingress
					// 	}
					// 	const loading = this.$loading({
					// 		lock: true,
					// 		text: 'Loading',
					// 		spinner: 'el-icon-loading',
					// 		background: 'rgba(0, 0, 0, 0.7)'
					// 	});
					// 	this.$api.gameOpenGame({
					// 		platType: item.platType,
					// 		gameType: item.gameType,
					// 		gameCode: item.code,
					// 		ingress: ingress,
					// 	}, (res) => {
					// 		loading.close()
					// 		if (res.code == 0) {
					// 			// this.$refs.gameWebview.show(res.data)
					// 			// this.full()
					// 			// console.log(res)
					// 			// return
					// 			window.location.href=res.data.url
					// 		} else {
					// 			this.$message.error(res.msg);
					// 		}
					// 	})
					// 	return;
					// }
					// this.$router.push(
					// 	`/index/typeDetaliList?id=key_${item.gameType}&type=${item.gameType}&platType=${item.platType}`)
				}

				console.log(userInfo, 'userInfo')
				// if(userInfo.caipiao_user==null&&userInfo.caipiao_pass==null){
				// 	console.log('没有注册',{username:userInfo.username,password:'123456'})
				// 	// userInfo.o_password   暂时密码就使用123456
				// 		this.$api.caipiaoLoginReg({username:'cai_'+userInfo.username,password:'123456'}, (res2) => {
				// 				if (res2.code == 0) {
				// 					console.log(res2)
				// 					//更新用户信息接口
				// 					this.$api.caipiaoAddUser({name:'cai_'+userInfo.username,pass:'123456'},(res3)=>{
				// 						console.log(res3,'更新平台的用户信息接口')
				// 						if (res3.code == 0) {
				// 							localStorage.setItem('member_sessionid',res2.data.data.member_sessionid)
				// 							localStorage.setItem('member_auth_id',res2.data.data.member_auth_id)
				// 							this.$router.push('/index/iframeCai?url=')
				// 						}
				// 					})

				// 				} else {
				// 					this.$message.error(res2.msg);
				// 				}
				// 			});
				// }else{
				// 	//有账号就登录
				// 		this.$api.caipiaoLoginLogin({name:userInfo.caipiao_user,pass:userInfo.caipiao_pass}, (res2) => {
				// 				if (res2.code == 0) {
				// 					console.log('success')
				// 					console.log(res2)
				// 					localStorage.setItem('member_sessionid',res2.data.data.member_sessionid)
				// 					localStorage.setItem('member_auth_id',res2.data.data.member_auth_id)
				// 					this.$router.push('/index/iframeCai?url=')
				// 				} else {
				// 					this.$message.error(res2.msg);
				// 				}
				// 			});

				// }
				// this.$api.caipiaoLoginReg({username:'',password:''}, (res) => {
				// 	if (res.code == 0) {
				// 		console.log('success')
				// 	} else {
				// 		this.$message.error(res.msg);
				// 	}
				// });
				// this.$router.push('/index/iframeCai?url=')


			},
			full() {
				// if (document.body.requestFullscreen) {
				//     document.body.requestFullscreen();
				// } else if (document.body.mozRequestFullScreen) {
				//     document.body.mozRequestFullScreen();
				// } else if (document.body.webkitRequestFullscreen) {
				//     document.body.webkitRequestFullscreen();
				// } else if (document.body.msRequestFullscreen) {
				//     document.body.msRequestFullscreen();
				// }
			},

			opennewmanbox() {
				this.$nextTick(() => {
					this.$refs.nBox.openForget()
				})
			},
			opennewmanbox2() {
				this.$nextTick(() => {
					this.$refs.nBox.openForget2()
				})
			},
			closenewmanbox() {
				this.$refs.nBox.closeForget()
			},
			openMenus() {
				this.$refs.pcDrawer.openMenus()
			},
			closeMenus() {
				this.$refs.pcDrawer.closeMenus()
			},
			pageScroll(e) {
				// console.log(e,'滚动？')
				this.scrollTop = e.target.scrollTop
			},
			changeNav(item) {
				if (item.id == -4) {
					this.$router.push('../../index/search')
				} else if (item.id == 7 || item.id == 6 || item.id == 4) {
					//调整到pg游戏大厅

					this.$router.push('../../index/typeDetaliList?id=key_1&type=1&platType=1')

				} else {
					console.log('是准备往下滑了吗', item.id)
					console.log(document.querySelector('.scroll-container'), '找到了这个元素吗')
					this.navIndex = item.id
					console.log(document.querySelector('#gameslist_' + item.id)
						.offsetTop - (window.outerWidth / 750 * 300), 'huadong')
					document.querySelector('.scroll-containers').scrollTop = document.querySelector('#gameslist_' + item
							.id)
						.offsetTop - (window.outerWidth / 750 * 300)
				}

				// else if(item.id == 6){
				// 		//跳转到彩票大厅
				// 		let userInfo = localStorage.getItem('userInfo')
				// 		if(!userInfo){
				// 			// this.$message.error(this.$t('l_qingdenglu'));

				// 			this.$refs.indexheader.openLogin()

				// 			return
				// 		}
				// 		this.$api.caipiaoAddUser({typeid:'',type_name:''},(res)=>{
				// 		console.log(res,'res')
				// 		if(res.data){
				// 			localStorage.setItem('caipiao_url',res.data.url)
				// 			// this.$router.push('/index/iframeCai?url='+res.data.url)
				// 			window.location.href=res.data.url
				// 		}else{
				// 			//处理一下  有时候服务器会返回拼接好的请求参数  不知道怎么绝技  先前端解决一下 
				// 			// 使用正则表达式匹配第一个左括号后面的内容
				// 			var match = res.match(/\{.*\}/);

				// 			// match[0] 存储了匹配到的内容
				// 			var news_res = match[0];
				// 			console.log(news_res,'news_res')
				// 			let url=JSON.parse(news_res);
				// 			console.log(url,'是否转成功---')
				// 			window.location.href=url
				// 			// localStorage.setItem('caipiao_url',url)
				// 			// this.$router.push('/index/iframeCai?url='+url)
				// 		}

				// 		// window.open(res.data.url)  下面这个好像会以pc打开
				// 	})

				// }
			},
			gotop1() {
				document.querySelector('.scroll-container1').scrollTop = 0
			},
			pageScroll1(e) {
				this.scrollTop1 = e.target.scrollTop
			},
			changeNav1(item) {
				if (item.id == -4) {
					this.$router.push('../../index/search')
				} else {
					this.navIndex1 = item.id
					document.querySelector('.scroll-container1').scrollTop = document.querySelector('#gameslist1_' + item
						.id).offsetTop - 62
				}
			},
			getBanner() {
				this.$api.bannerGetItemList({
					id: 1
				}, (res) => {
					if (res.code == 0) {
						this.swiperList = res.data
					} else {
						// this.$message.error(res.msg);
					}
				})
			},
			getIndexGames() {
				this.$api.getIndexGames({}, (res) => {
					if (res.code == 0) {
						this.gameList = res.data
					} else {
						// this.$message.error(res.msg);
					}
				});
			},
			getNotice() {
				this.$api.ArticleGetList({
					category_id: 4
				}, (res) => {
					if (res.code == 0) {
						let todata = res.data.list
						todata.forEach((item, index) => {
							let dom = document.createElement('span');
							dom.textContent = item.msg
							dom.style.whiteBreak = 'normal'
							dom.style.whiteSpace = 'nowrap'
							dom.style.display = 'block'
							dom.style.fontSize = '.16rem'
							dom.style.opacity = 0;
							dom.style.position = 'absolute';
							dom.id = 'testwidthbox';
							document.body.appendChild(dom)
							let wh = document.querySelector('#testwidthbox').clientWidth
							document.querySelector('#testwidthbox').remove()
							todata[index].width = wh
						})
						this.noticeData = todata
						console.log(this.noticeData)
						this.NoticeOptions.autoplay.delay = 20000
						setTimeout(() => {
							this.noticeIndex = 0
						}, 200)
					} else {
						// this.$message.error(res.msg);
					}
				})
			}
		}
	}
</script>

<style lang="less">
	.right_img {
		position: fixed;
		right: 0.21rem;
		bottom: 4.5rem;
		z-index: 99999;
	}

	.right_img2 {
		position: fixed;
		right: 0.21rem;
		bottom: 2.6rem;
		z-index: 99999;

	}

	.right_img_pc2 {
		position: fixed;
		right: 50px;
		bottom: 200px;
		z-index: 99999;
	}

	.right_img_pc {
		position: fixed;
		right: 50px;
		bottom: 50px;
		z-index: 99999;
	}

	.tabs::-webkit-scrollbar {
		display: none;
	}

	.el-carousel::-webkit-scrollbar {
		width: 0;
	}

	.index {
		.container {
			width: unset;
			// padding: 0 0.2rem;
		}

		.swiperbox {
			width: 100%;
			margin-top: 0.2rem;
			height: 2.1rem;
			border-radius: .1rem;
			overflow: hidden;

			.swiper-pagination-bullet-active {
				background: var(--theme-color-line);
			}

			.swiper-pagination-bullet {
				width: 0.1rem;
				height: 0.1rem;
			}

			.swiper-pagination {
				bottom: 0;
			}

			.swiper-slide {

				border-radius: .1rem;
				overflow: hidden;

				img {
					width: 100%;
					height: 100%;
				}
			}
		}

		.notice {
			display: flex;
			font-size: .16rem;
			color: #ffffff;
			line-height: .48rem;
			height: .48rem;
			align-items: center;
			margin-top: .2rem;

			.laba {
				height: 0.32rem;
				width: 0.36rem;
			}

			.swiper-container {
				height: .48rem;
				flex: 1;
				margin: 0 .1rem;
			}

			.icon_notice {
				margin-top: -0.25rem;
				width: 0.44rem;
				height: 0.385rem;
			}

			.swiper-slide {
				span {
					transition-property: transform, -webkit-transform;
					transform: translateX(6.1rem);
					font-size: .16rem;
					display: block;
					position: absolute;
					white-space: nowrap;
					color: var(--theme-text-color);
				}
			}
		}

		.tabs {
			margin: .1rem 0;
			height: 1.2rem;
			overflow-y: hidden;
			overflow-x: scroll;
			position: relative;
			background-color: var(--theme-main-bg-color);

			::-webkit-scrollbar {
				width: 0.1rem;
				height: 0.1rem;
				display: none !important;
			}

			&_bar {
				border-bottom: 0.01rem solid var(--theme-color-line);
				display: flex;
				flex-wrap: nowrap;
				position: absolute;
				height: 1.1rem;

				.navs_list {

					width: 1.3rem;
					float: left;

					img,
					i {
						display: block;

						position: relative;
						width: 0.8rem;
						// font-size: .64rem;
						font-size: .8rem;
						color: var(--theme-text-color-lighten);
						text-align: center;
						margin: 0 auto;
						padding: 0.05rem 0;


						display: flex;
						align-items: center;
						justify-content: center;
					}

					i {
						height: 0.64rem;
					}

					img {
						// margin-top: .1rem;
					}

					span {
						display: block;
						text-align: center;
						color: var(--theme-text-color-lighten);
						font-size: .2rem;
					}
				}

				.active {
					border-bottom: 0.02rem solid var(--theme-primary-color);

					span {
						color: var(--theme-primary-color);
						padding-top: .06rem;
					}
				}

			}
		}

		.top_tabever_parent {
			position: absolute;
			background: var(--theme-main-bg-color);
			left: 0;
			z-index: 100;
			width: 100%;
			margin: 0;
			top: constant(safe-area-inset-top);
			top: env(safe-area-inset-top);
		}

		.top_tabever {
			position: absolute;
			top: var(--theme-header-height2);
			background: var(--theme-main-bg-color);
			left: 0;
			z-index: 100;
			width: 100%;
			margin: 0;
		}

		.gamesbox {
			.gameslist {
				margin-bottom: .3rem;

				.titles {
					padding: 0 0 .3rem;
					display: flex;
					justify-content: space-between;
					align-items: center;
					color: var(--theme-text-color-darken);

					.left {
						display: flex;
						align-items: center;

						img {
							display: block;
							width: 0.52rem;
						}

						span {
							align-items: center;
							display: -ms-flexbox;
							display: flex;
							font-size: .3rem;
						}
					}

					.right {
						font-size: 0.25rem;
					}
				}

				.lists {
					display: flex;
					flex-wrap: wrap;

					.items {
						margin: var(--cardRowSpacing) var(--cardColSpacing);
						width: 33.33333%;
						margin-bottom: 15px;

						.box {
							height: 2.792rem;
							width: 2.1rem;
							border-radius: 0.2rem;
							margin: 0 auto;
							overflow: hidden;
							position: relative;

							.pic {
								width: 100%;
								height: 100%;
							}

							.lovebtn {
								align-items: center;
								cursor: pointer;
								display: -ms-flexbox;
								display: flex;
								font-size: .4rem;
								height: 0.4rem;
								justify-content: center;
								line-height: 0;
								position: absolute;
								right: 0.06rem;
								top: 0.06rem;
								width: 0.4rem;
								z-index: 9;
							}

							.typeone {
								position: absolute;
								z-index: 1;
								bottom: 0;
								width: 100%;
								display: flex;
								align-items: center;
								text-align: center;
								flex-direction: column-reverse;
								pointer-events: none;
								padding-bottom: 5px;

								span {
									font-family: MicrosoftYaHei;
									font-size: .32rem;
									line-height: 1.1;
									line-height: 1.3;
									padding: 0 5px;
									max-height: 2.2rem;
									max-width: 100%;
									overflow: hidden;
									text-align: center;
									text-overflow: ellipsis;
									text-shadow: 0 0.02rem 0.04rem rgba(0, 0, 0, .3);
									color: var(--theme-text-color-task-btn);
									/*超出部分隐藏*/
									overflow: hidden;
									/*强制在一行*/
									white-space: nowrap;
									/*文本超出部分省略*/
									text-overflow: ellipsis;
								}

								.cspic {
									display: inline-block;
									height: 0.46rem;
									width: 0.46rem;
								}
							}

							.tuijian {
								font-size: .2rem;
								font-weight: 700;
								line-height: 1;
								background-color: var(--theme-secondary-color-error);
								align-items: center;
								color: var(--theme-text-color-activities-text);
								display: flex;
								padding: .03rem .16rem;
								position: absolute;
								z-index: 1;
								top: 0;
								left: 0;
								border-top-right-radius: .1rem;
								border-bottom-right-radius: .1rem;
							}
						}
					}
				}
			}
		}

		.copyright {
			padding-bottom: 2rem;

			p {
				color: var(--theme-text-color-lighten);
				font-size: .18rem;
				line-height: .36rem;
				padding: 0 0.26rem;
				text-align: center;
				padding-bottom: .2rem;
			}
		}
	}

	.pc_con {
		width: 100%;
		display: flex;
		justify-content: flex-start;
	}

	.pc_conbox * {
		box-sizing: border-box;
	}

	.pc_conbox {
		flex: 1;
		height: calc(100vh - 62px);
		overflow: hidden;
		display: flex;
		justify-content: center;
	}

	.pc_conboxs {
		width: 945px;
		padding-top: 15px;
		height: 100%;
		overflow-y: scroll;
	}

	.pc_conboxs::-webkit-scrollbar {
		display: none;
	}

	.el-carousel {
		width: 100%;
		height: 208px;
		border-radius: 20px;
	}

	.el-carousel img {
		width: 100%;
		height: 100%;
	}

	.pc_notice {
		width: 100%;
		height: 47px;
		align-items: center;
		background-color: var(--theme-main-bg-color);
		border-radius: 10px;
		color: var(--theme-text-color);
		display: flex;
		font-size: 14px;
		justify-content: space-between;
		padding: 9px 15px 9px 15px;
		margin-top: 15px;
	}

	.pc_notice .laba {
		width: 19px;
		height: 17px;
		margin-right: 7px;
	}

	.pc_notice .icon_notice {
		position: relative;
		// width: 60px;
		// height: 50px;
		// 	width: 0.2rem;
		// height: 0.1rem;
		// background-image: url(/icons/index/main2.png);
		// background-position: -206px -223px;
		// background-size: 530px 500px;
		width: 0.44rem;
		height: 0.385rem;
		margin-top: -0.1rem;
		background-position: -4.697rem -3.3rem;
		background-size: 5.962rem 5.9345rem;

		cursor: pointer;
	}

	.pc_notice .noticeswiperbox {
		flex: 1;
		height: 100%;
	}

	.pc_notice .noticeswiperbox .swiper-slide {
		line-height: 29px;
	}

	.pc_list {
		width: 100%;
		height: auto;
		border-radius: 10px;
		// background-color: var(--theme-top-nav-bg);;
		background-color: var(--theme-main-bg-color);
		margin-top: 15px;
	}

	.pc_listtop {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.pc_tabs {
		width: 100%;
		padding: 0 15px;
		height: 59px;
		overflow-y: hidden;
		overflow-x: overlay;
		position: relative;
		box-sizing: border-box;

		&_bar {
			border-bottom: 1px solid var(--theme-color-line);
			display: flex;
			flex-wrap: nowrap;
			position: absolute;
			height: 100%;

			.navs_list {

				// width: 78px;
				width: 130px;
				float: left;
				border-bottom: 2px solid transparent;
				cursor: pointer;

				img,
				i {
					display: block;
					position: relative;
					width: 35px;
					max-height: 26px;
					font-size: 32px;
					color: var(--theme-alt-neutral-2);
					text-align: center;
					margin: 0 auto;
					margin-top: 4px;
					margin-bottom: 5px;
				}

				i {
					height: 26px;
				}

				img {
					margin-top: 5px;
				}

				span {
					display: block;
					text-align: center;
					color: var(--theme-alt-neutral-2);
					font-size: 12px;
				}
			}

			.active {
				border-bottom: 2px solid var(--theme-primary-color);

				span {
					color: var(--theme-primary-color);
					padding-top: 3px;
				}
			}

		}
	}

	.el-scrollbar {
		flex: 1;
	}

	.pc_gamesbox {
		padding: 0 15px;

		.pc_gameslist {
			padding: 23px 0;
			border-bottom: 1px solid var(--theme-color-line);

			.titles {
				margin-bottom: 23px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: var(--theme-text-color-darken);

				.left {
					display: flex;
					align-items: center;

					img {
						display: block;
						width: 31px;
					}

					span {
						align-items: center;
						display: -ms-flexbox;
						display: flex;
						font-size: 18px;
					}
				}

				.right {
					font-size: 15px;
					cursor: pointer;
				}
			}


			.lists {
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				padding: 0 7px;

				.items {
					margin: 9px 0;
					width: 16.66667%;

					.box {
						height: 178px;
						width: 133px;
						border-radius: 10px;
						margin: 0 auto;
						overflow: hidden;
						position: relative;

						.pic {
							width: 100%;
							height: 100%;
						}

						.lovebtn {
							align-items: center;
							cursor: pointer;
							display: -ms-flexbox;
							display: flex;
							font-size: 26px;
							height: 26px;
							justify-content: center;
							line-height: 0;
							position: absolute;
							right: 4px;
							top: 4px;
							width: 26px;
							z-index: 9;
						}

						.typeone {
							position: absolute;
							z-index: 1;
							bottom: 0;
							width: 100%;
							display: flex;
							align-items: center;
							text-align: center;
							flex-direction: column-reverse;
							pointer-events: none;
							padding-bottom: 5px;

							span {
								-webkit-line-clamp: 2;
								-webkit-box-orient: vertical;
								word-wrap: break-word;
								display: -webkit-box;
								font-family: MicrosoftYaHei;
								font-size: 22px;
								line-height: 1.1;
								line-height: 1.3;
								margin-left: 5px;
								max-height: 110px;
								max-width: 100%;
								overflow: hidden;
								text-align: center;
								text-overflow: ellipsis;
								text-shadow: 0 2px 4px rgba(0, 0, 0, .3);
								color: var(--theme-text-color-task-btn);
							}

							.cspic {
								display: inline-block;
								height: 30px;
								width: 30px;
							}
						}

						.tuijian {
							font-size: 12px;
							font-weight: 700;
							line-height: 1;
							background-color: var(--theme-secondary-color-error);
							align-items: center;
							color: var(--theme-text-color-activities-text);
							display: flex;
							padding: 1.5px 4px;
							position: absolute;
							z-index: 1;
							top: 0;
							left: 0;
							border-top-right-radius: 5px;
							border-bottom-right-radius: 5px;
						}
					}
				}
			}
		}
	}

	.pc_gameslist:last-child {
		border: 0;
	}

	.pc_goTop {
		width: 66px;
		position: fixed;
		bottom: 55px;
		z-index: 100;
		right: 15px;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: var(--theme-main-bg-color);
		border: 1px solid var(--theme-color-line);
		border-radius: 6px;
		padding: 7px 0;
		cursor: pointer;
		z-index: 9999;

		i {
			display: flex;
			align-items: center;
			display: block;
			width: 22px;
			height: 22px;
			line-height: 15px;
			font-size: 22px;
			text-align: center;
			background-color: var(--theme-primary-color);
			border-radius: 50%;
			color: var(--theme-primary-font-color);
			margin: 7px auto 0;
		}

		span {
			word-wrap: break-word;
			color: var(--theme-text-color-lighten);
			font-size: 12px;
			display: block;
			text-align: center;
		}
	}

	.pc_copyright {
		padding: 16px 0;

		p {
			color: var(--theme-text-color-lighten);
			font-size: 12px;
			line-height: 20px;
			padding: 0 20px;
			text-align: center;
		}
	}

	.curp {
		cursor: pointer;
	}

	.typeone.one {
		background: linear-gradient(rgb(199, 91, 247), rgb(172, 26, 239));
	}

	.typeone.two {
		background: linear-gradient(rgb(250, 146, 61), rgb(246, 105, 0));
	}

	.typeone.three {
		background: linear-gradient(rgb(156, 85, 49), rgb(156, 93, 67));
	}

	.typeone.four {
		background: linear-gradient(rgb(192, 20, 59), rgb(239, 8, 77));
	}

	.typeone.five {
		background: linear-gradient(rgb(120, 93, 86), rgb(171, 140, 121));
	}

	.typeone.six {
		background: linear-gradient(rgb(21, 137, 116), rgb(22, 213, 164));
	}


	.tk {
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 999999 !important;
		width: 100vw;
		height: 93% !important;
		border-top-left-radius: 0.2rem;
		border-top-right-radius: 0.2rem;
		background-color: var(--theme-bg-color);
	}

	.mask {
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		z-index: 88;
		height: 100%;
		background-color: rgba(0, 0, 0, .45);
	}
</style>